<template>
  <div class="drug">
    <el-dialog title="新增/编辑" :visible.sync="dialogVisible" style="float: left;margin-top: 10px">
      <el-form :model="dialogForm" style="margin-top: 10px">
        <el-form-item label="药品编号" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品名称" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品规格" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.standard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品单位" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.unit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品单价" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品剂型" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.dos" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品类型" :label-width="formLabelWidth">
          <el-input style="width:80%" v-model="dialogForm.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group style="margin:0 auto">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新 增</el-button>
            <el-button type="primary" @click="change">
              编 辑
              <i class="el-icon-refresh el-icon--right"></i>
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-row :gutter="20">
      <el-col :span="9">
        <el-form :inline="true" style="float:left;" :model="searchDrug">
          <!--   <el-form-item>
            <el-button type icon="el-icon-back" @click="back">退出</el-button>
          </el-form-item>-->
          <el-form-item>
            <el-button type="info" size="mini" @click="quit">退出</el-button>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchDrug.query" placeholder="药品检索" clearable></el-input>
          </el-form-item>
          <el-button size="middle" type="primary" @click="search">查询药品</el-button>
        </el-form>
      </el-col>
      <el-col :span="5">
        <el-button size="middle" type="primary" @click="dialogVisible = true">新增药品</el-button>
      </el-col>
      <el-col :span="10">
        <el-button size="middle" type="primary">导入药品</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="5">
      <el-col :span="25">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label width="150">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.$index"
                  v-model="templateRadio"
                  @change.native="getTemplateRow(scope.$index,scope.row)"
                  style="margin-left: 20px;"
                >&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="药品编码" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="药品名称" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="药品规格" width="100">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugStandard }}</span>
              </template>
            </el-table-column>
            <el-table-column label="药品单位" width="100">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugUnit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="药品单价" width="100">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugUnitprice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="药品剂型" width="100">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugDosageform }}</span>
              </template>
            </el-table-column>
            <el-table-column label="药品类型" width="100">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.drugType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleIn(scope.$index)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index,scope.row.drugId)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-button size="mini" type="danger" @click="submit()">批量删除(跳转至门诊发药界面)</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Drug",
  data() {
    return {
      templateRadio: {},
      dialogForm: {
        id: "",
        name: "",
        standard: "",
        unit: "",
        price: "",
        dos: "",
        type: ""
      },
      searchDrug: {
        query: ""
      },
      me: "myInfo",
      activeName: "first",
      formInfo: {
        user: ""
      },
      tableData: [],
      formLabelWidth: "120px",
      dialogVisible: false
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      if (sessionStorage.getItem("drug") != null) {
        var query = sessionStorage.getItem("drug");
        axios
          .get("/api/yaofang/search", {
            params: {
              query: query
            }
          })
          .then(Response => {
            console.log(Response.data);
            this.tableData = Response.data;
            this.$message({
              showClose: true,
              message: "查询成功",
              type: "success"
            });
          });
      }
    },
    quit() {
      this.$router.push({ path: "/", replace: true });
    },
    add() {
      console.log(this.dialogForm);
      let drug = JSON.stringify({
        drugId: this.dialogForm.id,
        drugName: this.dialogForm.name,
        drugStandard: this.dialogForm.standard,
        drugUnit: this.dialogForm.unit,
        drugUnitprice: this.dialogForm.price,
        drugDosageform: this.dialogForm.dos,
        drugType: this.dialogForm.type
      });
      axios
        .post("/api/yaofang/add", drug, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(res => {
          if (res.data == "true") {
            this.$message({
              showClose: true,
              type: "success",
              message: "添加成功"
            });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "添加失败"
            });
          }
        });
      this.$router.go(0);
    },
    change() {
      console.log(this.dialogForm);
      let drug = JSON.stringify({
        drugId: this.dialogForm.id,
        drugName: this.dialogForm.name,
        drugStandard: this.dialogForm.standard,
        drugUnit: this.dialogForm.unit,
        drugUnitprice: this.dialogForm.price,
        drugDosageform: this.dialogForm.dos,
        drugType: this.dialogForm.type
      });
      axios
        .post("/api/yaofang/change", drug, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(res => {
          if (res.data == "true") {
            this.$message({
              showClose: true,
              type: "success",
              message: "更改成功"
            });
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "更改失败"
            });
          }
        });
      this.$router.go(0);
    },
    search() {
      console.log(this.searchDrug.query);
      sessionStorage.setItem("drug", this.searchDrug.query);
      axios
        .get("/api/yaofang/search", {
          params: {
            query: this.searchDrug.query
          }
        })
        .then(Response => {
          console.log(Response.data);
          this.tableData = Response.data;
          this.$message({
            showClose: true,
            message: "查询成功",
            type: "success"
          });
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    rebuild() {
      this.$$router.go(0); //刷新数据
    },
    submit() {
      this.$router.push({ path: "/O_M/" });
    },
    handleIn(index) {
      this.dialogForm.id = this.tableData[index].drugId;
      this.dialogForm.name = this.tableData[index].drugName;
      this.dialogForm.standard = this.tableData[index].drugStandard;
      this.dialogForm.unit = this.tableData[index].drugUnit;
      this.dialogForm.price = this.tableData[index].drugUnitprice;
      this.dialogForm.dos = this.tableData[index].drugDosageform;
      this.dialogForm.type = this.tableData[index].drugType;
      console.log(this.tableData[index]);
      console.log(this.dialogForm);
      this.dialogVisible = true;
    },
    handleDelete(index, id) {
      axios
        .get("/api/yaofang/delete", {
          params: {
            id: id
          }
        })
        .then(res => {
          if (res.data == "true") {
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: "删除失败",
              type: "error"
            });
          }
        });
      this.$router.go(0);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-row {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.test {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
